<template>
  <view class="user-container">
    <view class="user-header">
      <view class="avatar-section">
        <u-avatar :src="userInfo.avatar" size="160rpx"></u-avatar>
        <view class="change-avatar" @click="changeAvatar">更换头像</view>
      </view>
    </view>
    
    <view class="info-section">
      <u-cell-group>
        <u-cell title="用户名" :value="userInfo.username" />
        <u-cell title="昵称" :value="userInfo.nickname" @click="editInfo('nickname')" is-link />
        <u-cell title="性别" :value="genderText" @click="editInfo('gender')" is-link />
        <u-cell title="手机号" :value="userInfo.mobile" @click="editInfo('mobile')" is-link />
        <u-cell title="邮箱" :value="userInfo.email" @click="editInfo('email')" is-link />
        <u-cell title="个人简介" :value="userInfo.bio || '未设置'" @click="editInfo('bio')" is-link />
      </u-cell-group>
    </view>
    
    <view class="action-section">
      <u-button type="primary" @click="saveUserInfo">保存修改</u-button>
    </view>
  </view>
</template>

<script>
import { user } from '@/api/cms'

export default {
  data() {
    return {
      userInfo: {
        username: '',
        nickname: '',
        avatar: '',
        gender: 0,
        mobile: '',
        email: '',
        bio: ''
      }
    }
  },
  computed: {
    genderText() {
      const genderMap = {
        0: '未设置',
        1: '男',
        2: '女'
      }
      return genderMap[this.userInfo.gender] || '未设置'
    }
  },
  onLoad() {
    this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      try {
        const { data } = await user.getUserInfo()
        if (data.code === 1) {
          this.userInfo = data.data.userInfo
        } else {
          uni.showToast({
            title: data.msg || '获取用户信息失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取用户信息失败', error)
        uni.showToast({
          title: '获取用户信息失败，请稍后再试',
          icon: 'none'
        })
      }
    },
    
    // 更换头像
    changeAvatar() {
      uni.navigateTo({
        url: '/pages_mine/pages/avatar/index'
      })
    },
    
    // 编辑信息
    editInfo(field) {
      uni.navigateTo({
        url: `/pages_mine/pages/info/edit?field=${field}&value=${this.userInfo[field] || ''}`
      })
    },
    
    // 保存用户信息
    async saveUserInfo() {
      try {
        const { data } = await user.updateUserInfo(this.userInfo)
        if (data.code === 1) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          
          // 更新本地存储的用户信息
          uni.setStorageSync('userInfo', this.userInfo)
        } else {
          uni.showToast({
            title: data.msg || '保存失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('保存用户信息失败', error)
        uni.showToast({
          title: '保存失败，请稍后再试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.user-header {
  background-color: #ffffff;
  padding: 40rpx 0;
  margin-bottom: 20rpx;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .change-avatar {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #3c9cff;
  }
}

.info-section {
  margin-bottom: 30rpx;
}

.action-section {
  padding: 0 30rpx;
}
</style>